<template>
    <div class="el-fr-cascader">
        <el-cascader :disabled="setAttr('disabled', false)" v-model="modelValue" :options="JSON.parse(item.attribute.cascaderData.extendData)" :props="propsOptions" :placeholder="setAttr('placeholder', '请选择')" @change="handleChange" collapse-tags></el-cascader>
    </div>
</template>

<script>
import { toRef, ref } from 'vue'
import yunApi from '../../../../public/static/js/toolApi.js'
export default {
    name: 'Cascader',
    props: {
        item: {
            type: Object,
            default: function () {
                return {}
            }
        },
        value: null
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        let item = toRef(props, 'item')
        let propsOptions = ref({multiple: setAttr('multiple', false)})
        function handleChange(value) {
            context.emit('elFrCascaderChange', value)
        }
        function setAttr(name, value = '') {
            return Object.prototype.hasOwnProperty.call(item.value.attribute, name) ? item.value.attribute[name].value : value
        }
        return {
            handleChange,
            setAttr,
            propsOptions
        }
    },
    data() {
        return {
            modelValue: []
        }
    },
    watch: {
        'item.attribute.multiple': {
            handler(v) {
                this.propsOptions.multiple = this.setAttr('multiple', false)
            },
            deep: true
        },
        value: {
            handler(v) {
                if (v) {
                    if (Object.prototype.hasOwnProperty.call(this.item.attribute, 'multiple') && this.item.attribute['multiple'].value) {
                        this.modelValue = this.value
                    } else {
                        let temp = this.value.split(',')
                        if (temp[temp.length - 1] === this.modelValue[this.modelValue.length - 1]) {
                            return
                        } else {
                            this.modelValue = this.value.split('/')
                        }
                    }
                }
            },
            deep: true,
            immediate: true
        },
        modelValue: {
            handler(v) {
                if (Object.prototype.hasOwnProperty.call(this.item.attribute, 'multiple') && this.item.attribute['multiple'].value) {
                    this.$emit('update:modelValue', { value: v })
                } else {
                    if (v.join('/') === this.value) {
                        return
                    }
                    this.$emit('update:modelValue', { value: v.join('/') })
                }
            },
            deep: true
        }
    },
    methods: {},
    mounted() {}
}
</script>

<style></style>
